<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/details.css">
    <link rel="stylesheet" href="./font/iconfont.css">

</head>
<body>
    <!-- 头部 -->
	<div class="top1"></div>
    <!-- 主体 -->
<div>
    <div class="box1">
        <a href="">首页</a>>>
        <a href="">图片款</a>>>
        <span>2022-02-28-10112</span>
    </div>
<div class="section">
    <div class="section-left">
    <div id="left" class="lefte">
        <img src="" alt="">
        <div class="mask"></div>
    </div>
    <div id="right">
        <img src="" id="imgListR" alt="" >
    </div>
    <div style="clear: both;"></div>
     <div class="box4">
    <ul class="xiaoTuList">
        
        
    </ul>
</div>
    <div class="btn1"><img src="./images/btn4_prev.png" alt=""></div>
    <div class="btn2"><img src="./images/btn4_next.png" alt=""></div>
</div>
</div>
   <div class="section-right">
    <div class="name">
         <h3 class="title"></h3>
         <p class="time">shijian</p>
         <p>类型:图片款</p>
        
     </div>
     <div>
        <em>价格：人民币</em><span class="price"></span><em>元</em>
        <br> <em>韩币：</em><span class="money"></span><em>元</em>
        <p>代购费:韩币价格x汇率x3%</p>
     </div>
     <div>
         <form action="">
             <table>
                 <tr class="color">
                     <td>颜色</td>
                     
                 </tr>
                 <tr>
                    <td >尺寸</td>
                    <td>S M L XL XXL </td>
                </tr>
                <tr>
                    <td>购买数量</td>
                    <td >
                        <input type="button" id="btn3" value="-">
                        <input type="text" class="fox" value="1">
                        <input type="button" id="btn4" value="+">
                    </td>
                </tr>
                <tr>
                    <td >购买备注</td>
                    <td><input type="text" value="请注明购买颜色尺寸"></td>
                </tr>
                <tr class="mn">
                    <td></td>
                    <td class="m1">
                       <a href="./cart.html"><p>加入购物车</p></a>
                    </td>
                    
                   
                </tr>
             </table>
         </form>
     </div>
   </div>

<div class="section1">
    <div class="section1-left">
        <h6>相关商品</h6>
        <div>
<img src="./images/img12.jpg" alt="">
<a href="">220525-0388</a>
<p>￥148.63</p>
        </div> 
        <div>
            <img src="./images/img12.jpg" alt="">
            <a href="">220525-0388</a>
            <p>￥148.63</p>
        </div> 
        <div>
            <img src="./images/img12.jpg" alt="">
            <a href="">220525-0388</a>
            <p>￥148.63</p>
        </div> 
        <div>
            <img src="./images/img12.jpg" alt="">
            <a href="">220525-0388</a>
            <p>￥148.63</p>
        </div> 
        <div>
            <img src="./images/img12.jpg" alt="">
            <a href="">220525-0388</a>
            <p >￥148.63</p>
        </div> 
        <div>
            <img src="./images/img12.jpg" alt="">
            <a href="">220525-0388</a>
            <p>￥148.63</p>
        </div> 
       
    </div>
 <div class="section1-right">
     <div style="width: 900px;height: 50px;font-size: 20px;">商品详情</div>
      <p>1.关于商品</p>
       <p>商品均来自东大门服装批发档口实拍。经仔细检查后发货，绝不存在质量问题。商品标价均为东大门批发档口的真实批发价格。请放心购买。</p>
       <p>2.批发与尺码</p>
       <p>除个别商家规定必须同款3件起批,一般情况下同一款衣服2件即可拿货,不同颜色和尺码数可以混拿。所有商品附带原始购物小票。韩国服装大部分为均码。少数有尺码。具体尺码参照《尺码指南》</p>
       <p>3.物流发货？</p>
       <p>下单之后,备货时间需要1-3天,因为也许您订的一些货，不能当天就有现货，需要预定，等隔天，或者是两天后才能出货, 所以这个需要一些时间，一般三天之后，如果遇到韩国反馈缺货的，我们会及时通知您。您可以选择退款缺货款式或者再定新款。 具体物流参照《物流指南》</p>
       <p>4.如何支付</p>
       <p>必须全额付款，货款压的太多，没法周转，希望您能理解，所以货款必须直接到账。物流费用需得到货物重量通知后再支付。</p>
       <p>注：东大门每周六晚上休息，但是网站可以正常下单。我们会在周日为您采购。</p>
 </div>
</div>
</div>
<!-- 尾部 -->
<div class="bottom1" style="margin-top: 1500px"></div>

<script>
   var obtn1=document.querySelector(".btn1")
        var obtn2=document.querySelector(".btn2")
        var imgListL = document.getElementById('imgListL')
        var xiaoTuList = document.querySelector('.xiaoTuList')  
        
    var fox=document.querySelector(".fox")
    var obtn4=document.querySelector("#btn4")
    var obtn3=document.querySelector("#btn3")
   
    obtn4.onclick=function(){
        fox.value++;
        console.log(fox.value)
    }
    obtn3.onclick=function(){
        if(fox.value==1){
            fox.value=1
        }else{
            fox.value--
        }
        
    }
        // 当鼠标移动到小图时,添加样式和设置当前选中的图片
        // 这里用到了 事件委托
        xiaoTuList.onmouseover=function(ev){
            var e = ev || window.event
            var targ = e.target || window.srcElement
            if(targ.nodeName.toLowerCase() == 'img'){
                targ.className = 'Style'
                imgListL.src = targ.src
                imgListR.src = targ.src
            }
        }
// 当鼠标离开小图时,删除添加样式
        xiaoTuList.onmouseout=function(ev){
            var e = ev || window.event
            var targ = e.target || window.srcElement
            if(targ.nodeName.toLowerCase() == 'img'){
                targ.className = ''
                
            }
        }
    </script>
     

    
 </body>
<script src="./libs/jquery.js"></script>
<script>
    $(".top1").load("http://localhost:3000/html/public.html #top");
   $(".bottom1").load("http://localhost:3000/html/public.html #footer");
</script>
 <script>
    //  let arr = [];
    // console.log(location.search.split("=")[1]);
    const id=location.search.split("=")[1];
     $.ajax({
       url:"http://localhost:3000/api",
       data:{
           type:"getGoods"
       },
       success:res=>{
           res=JSON.parse(res).data;
        //    console.log(res)
            let i=0;
            const flag=res.some((val,index)=>{
                i=index;
                // arr.push(val)
                return val.imgId===id;
            })
            if(flag){
                render(res[i])
            }
           
       }
       
   })

   function render(data){
   
     $(".lefte").children("img").attr("src",data.img);
     $( "#right").children("img").attr("src",data.img)
     // 图片列表
     let str = "";
        data.imgs.forEach(val=>{
            str += `<li><img src="${val.small}"></li>`
        })
        $(".box4").children("ul").html(str);
    //图片名称
        $(".title").html(data.name);
    //图片时间
    $(".time").html(data.imgtime);
    //价格
    $(".price").html(data.price);
    $(".money").html(data.money);
    //颜色
   data.colors.forEach(val=>{
       $(".color").append($(`<td class="color-black" style="background:${val.color}">${val.title}</td>`))
   })
   }
   

      
    // 当页面加载的时候
    window.onload = function(){
    // 获取节点
    var divLeft = document.getElementById('left')
    var divRight = document.getElementById('right')
    var mask = document.querySelector('.mask')
    var imgListR = document.getElementById('imgListR')
    
    // 获取右边块与右边大图的比例
    var mW = divRight.offsetWidth / imgListR.offsetWidth
    var mH = divRight.offsetHeight / imgListR.offsetHeight

    // 将左边块的大小乘以比例,求出小块的大小
    var mnW = divLeft.offsetWidth * mW
    var mnH = divLeft.offsetHeight * mH

    // 设置小块的大小
    mask.style.width = mnW + 'px'
    mask.style.height = mnH + 'px'

    // 当在左边块内移动的时候
    divLeft.onmousemove = function(e){
        // 获取鼠标位置
        var left = 0
        var top = 0
        if(e.target.className === 'mask'){
            left = e.offsetX + e.target.offsetLeft
            top = e.offsetY + e.target.offsetTop
        }else{
            left = e.offsetX
            top = e.offsetY
        }
        
        // 设置鼠标移动的时候,鼠标指针会处于在小块中间
        left = left - mask.offsetWidth/2
        top = top - mask.offsetHeight/2
        
        // 设置小块不能移出左边大块,设置最大可移动的宽度值和最高高度值
        var maskMaxL = divLeft.offsetWidth - mask.offsetWidth
        var maskMaxT = divLeft.offsetHeight - mask.offsetHeight
        // console.log(maskMaxL)
        // console.log(maskMaxT)
        if(left < 0){
            left = 0
        }else if(left > maskMaxL){
            left = maskMaxL
        }
        if(top < 0){
            top = 0
        }else if(top > maskMaxT){
            top = maskMaxT
        }
        // 设置移动时小块的移动位置
        mask.style.left = left + 'px'
        mask.style.top = top + 'px'

        // 设置右边大图移动位置
        var rightImgL = -left / divRight.offsetWidth*1.5*100 +'%'
        var rightImgT = -top / divRight.offsetHeight*1.5*100 +'%'

        // 设置右边大图的动画
        imgListR.style.transform = "translate("+rightImgL+","+rightImgT+")"
    }

    // 鼠标移动进入左边图片时小块和右边图片显示
    divLeft.onmouseenter = function(){
        mask.style.display = 'block',
        divRight.style.display = 'block'
    }
    // 鼠标移动离开左边图片时小块和右边图片隐藏
    divLeft.onmouseleave = function(){
        mask.style.display = 'none',
        divRight.style.display = 'none'
    }

    // 刚进入网页时,左边div块里面小块隐藏
    mask.style.display = 'none',
    // 刚打开网页时,让选中添加的样式隐藏
    divRight.style.display = 'none'
}

  var index=0;
        var liLen;
        $(".btn1").click(function(){
          
            liLen=$(".xiaoTuList").length
            if(index==0){
                $(".xiaoTuList").stop();
                // alert("最后一张")
                
            }else{
                index--
                if(index<=3){
                    $(".xiaoTuList").animate({left:-index*90},500)
                }else{
                    $(".xiaoTuList").stop();

                }
            
                
                
                
            }
        })
        
        $(".btn2").click(function(){
            if(index==5){
                $(".xiaoTuList").stop();
                
                // alert("这是第一页")
            }else{
                index++
                  if(index>=4){
                    $(".xiaoTuList").stop();
                  }else{
                    $(".xiaoTuList").animate({left:-index*90},500)
                  }
           }
            console.log(index)
        })
    </script>
</html>